<template>
<div>
  <div>
    <el-card style="background-color: #DCDFE6;position: absolute;z-index:999;width:82%;height:90px;"> 
      <el-col>
        <el-row :gutter="24">
        <el-col :span="4">
          <div>历史数据:{{totalNumAttr}}</div>
        </el-col>
        <el-col :span="18">
        <el-form  :model="QueryData" ref="QueryData" label-width="80px" :inline="true" size="mini">
          <!-- 查询方式选择 -->
          <el-form-item label="科室" prop="L_CXLX" style="width: 30%;">
            <el-select style="width: 65%;" v-model="QueryData.L_KS" placeholder="请选择" @change="a()">
              <template v-for="item in L_Data.Ldata1">
                <el-option :key="item" :label="item" :value="item">
                  <span style="float: left">{{item}}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="监控设备" prop="L_CXLX" style="width: 30%;">
            <el-select style="width: 65%;" v-model="QueryData.L_JKSB" placeholder="请选择" @change="a()">
              <template v-for="item in L_Data.Ldata2">
                <el-option :key="item" :label="item" :value="item" :disabled="QueryData.L_KS == ''">
                  <span style="float: left">{{item}}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="采集器" prop="L_CXLX" style="width: 30%;">
            <el-select style="width: 65%;" v-model="QueryData.L_CJQ" placeholder="请选择" @change="a()">
              <template v-for="item in L_Data.Ldata3">
                <el-option :key="item" :label="item" :value="item" :disabled="QueryData.L_JKSB == ''">
                  <span style="float: left">{{item}}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="mini" icon="el-icon-search" @click="ConfirmQuery()">查询</el-button>
        </el-col>
        </el-row>
      </el-col>
    </el-card>
  </div>
  <el-card style="width:82%;height:90px;">
  </el-card>
  <el-tabs type="border-card">
    <el-tab-pane label="折线图"> 
      <div>
        <el-card style="background-color: #F2F6FC;">
          <div style="width: 100%;">
            <el-row :gutter="24" style="width: 100%;height:60px;">
              <el-col :span="6">
              </el-col>
              <el-col :span="12">
                  时间段：
                  <el-date-picker
                    v-model="TimeFrame"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="mini">
                  </el-date-picker>
              </el-col>
            </el-row>
            <el-card style="width: 100%;height:550px;"> 
              <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
              <div id="main" style="width: 100%;height:500px;"></div>
            </el-card>
          </div>
        </el-card>
      </div>
    </el-tab-pane>
    <el-tab-pane label="历史数据">

      <el-row style="height:100%;">
        <el-main>
          <el-table :data="tableData" border stripe size="mini">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="采集编号" prop="CJBH"></el-table-column>
            <el-table-column label="采集器名称" prop="CJQMC"></el-table-column>
            <el-table-column label="采集器电量" prop="CJQDL"></el-table-column>
            <el-table-column label="采集温度值" prop="CJWDZ"></el-table-column>
            <el-table-column label="采集温度结果" prop="CJWDJG"></el-table-column>
            <el-table-column label="采集湿度值" prop="CJSDZ"></el-table-column>
            <el-table-column label="采集湿度结果" prop="CJSDJG"></el-table-column>
            <el-table-column label="采集时间" prop="CJSJ"></el-table-column>
          </el-table>
        </el-main>
      </el-row>
    </el-tab-pane>
  </el-tabs> 
</div>
</template>

<script>
//导入echarts
import echarts from "echarts";

  export default {
    name: "History",
    data() {
      return {
        qParamAttr1:[],//折线图查询参数
        dataAttr:[],//折线图总数据
        totalNumAttr:'',//折线节点个数
        LXData_WG:'',//下拉-部门
        LXData_SB:'',//下拉-设备
        L_Data:{
          Ldata1:'',
          Ldata2:'',
          Ldata3:'',
        },//部门查询类型
        QueryData:{//-----上部查询栏-----
          //查询=>
          L_KS:'',
          L_JKSB:'',
          L_CJQ:'',
        },

        tableData: [],//查询数据对象
        totalNumAttr2:'',//总数量
        qParamAttr2:{//查询参数
          AlarmType:'',
          },

        pickerOptions: {
          shortcuts: [{
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        TimeFrame: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]//时间范围

      };
    },
  methods: {
    TonSearching: function() {//查询-折线图数据
      var me = this;
      let url = "/static/data/Chart.json";// /jcJsxxb
      this.qParamAttr1.time=this.TimeFrame//时间范围
      this.qParamAttr1.QueryData=this.QueryData//查询参数
      if(url !== "") {
        me.getRequest(url, this.qParamAttr1).then(resp => {
            if(resp.status == 200) {
              this.dataAttr = resp.data.data;
              this.totalNumAttr = resp.data.data.data.length;
              this.onto();
            }
        });
      }
    },
    onto: function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));

        // 指定图表的配置项和数据
          var option = {
              title: {
                  text: ''
              },
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['温度(℃)','湿度(%RH)']  //图形数据点一
              },
              grid: {
                  left: '5%',
                  right: '5%',
                  bottom: '10%',
                  top:'20%',
                  borderColor:'#012f4a',
                  containLabel: true
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: this.dataAttr.data,  //图形数据点二
                  textStyle:{
                    color:""
                  }
              },
              yAxis: {
                  type: 'value'
              },
              series: [//图形数据点三
                      {
                        name: '温度(℃)',
                        type: 'line',
                        stack: '温度(℃)',
                        smooth:true,
                        data: this.dataAttr.Wdata,
                      }, {
                        name: '湿度(%RH)',
                        type: 'line',
                        stack: '湿度(%RH)',
                        smooth:true,
                        data: this.dataAttr.Sdata,
                      }],
              dataZoom: [
                  {
                    id: 'dataZoomX',
                    type: 'inside',
                    xAxisIndex: [0],
                    filterMode: 'none',
                    start: 0,
                    end: 50
                  }
                ]
        }

        // 使用刚指定的配置项和数据显示图表。 Chart
        myChart.clear();
        myChart.setOption(option);
      },
   ConfirmQuery: function(){
     this.TonSearching()
   },
  onLXData_WG: function(){// 查询下拉列表-部门
    var me = this;
    me.getRequest("/static/json/LXData_WG.json",{}).then(resp=>{
      if(resp.status == 200) {
        this.LXData_WG = resp.data.data;
      }
    });
  },
  onLXData_SB: function(){// 查询下拉列表-设备
    var me = this;
    me.getRequest("/static/json/LXData_SB.json",this.QueryData).then(resp=>{//QueryData中WGID-（网关id  or 部门id）,WGWZ-（网关位置  or 部门名称）   查询中只有一个具有参数，由所选择的查询方式决定
      if(resp.status == 200) {
        this.LXData_SB = resp.data.data;
      }
    });
  },

   //历史数据列表->
    Refresh() {
      var me = this;
      let url = "/static/data/HistoricalData.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url, this.qParamAttr2.AlarmType).then(resp => {
            if(resp.status == 200) {
              this.tableData = resp.data.data;
              this.totalNumAttr2 = resp.data.data.length;
            }
        });
      }
    },

   },

  async mounted() {
  },

  created(){
    var me = this;

    //渲染折线图
    this.TonSearching();

    //上部查询下拉选择框初始化
    this.onLXData_WG();
    this.onLXData_SB();

    this.QueryData.WGID = this.$route.query.ID//储存url中的参数-图表
    this.qParamAttr2.AlarmType = this.$route.query.ID//储存url中的参数-列表

    this.Refresh();

  }
}
</script>

<style lang="scss">
</style>
